<template>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div class="page">
        <div class="top">
            <div class="yi">
                <span>手工圈</span>
            </div>
            <div class="er" @click="jiaocheng()">
                <span>教程</span>
            </div>
            <div class="san" @click="search_fn()">
                <div style="margin-top: 5px;padding-left: 5px;"><van-icon name="search" size="15"/></div>
                <input type="text" placeholder="请输入搜索关键字" v-model="search" 
                    style="height: 25px;width: 99%;border-radius: 50px;background-color: #f4f4f4;outline:none;border: 0px;font-size: 8px;">
            </div>
            <div class="si" @click="message_fn()">
                <van-icon name="chat-o" color="#a0a0a0" size="25" />
            </div>
        </div>

        <!-- for循环部分 -->
        <div class="body">
            <div class="hang" v-for="(item,index) in items" :key="index">
                <div class="one">
                    <div class="zuo">
                        <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                    </div>
                    <div class="you">
                        <div class="y_s">
                            {{item.name}}
                        </div>
                        <div class="y_x">
                            <div class="y_x_z">{{item.time}}前</div>
                            <div class="y_x_y">来自{{item.type}}</div>
                        </div>
                    </div>
                </div>

                <div @click="pinglun_wz()">
                    <div class="two">
                    {{item.content}}
                </div>
                <div class="three_article">
                    <img src="../components/cby/photo/3.jpg" alt="">
                   
                </div>
                </div>
                <!-- <div class="two" @click="pinglun()">
                    {{item.content}}
                </div>
                <div class="three_article">
                    <img src="../components/cby/photo/3.jpg" alt="">
                   
                </div> -->
                <div class="four">
                    <div class="left">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.d_z" alt=""
                                @click="dianzan(index)">
                            <span>{{ item.dianzan_number }}</span>
                        </div>
                    </div>
                    <div class="zhong">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;"
                                src="../components/cby/photo/评论.png" alt="" @click="pinglun()">
                            <span>评论</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.s_c" alt=""
                                @click="shoucang(index)">
                            <span>{{item.now_shou}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hang" v-for="(item,index) in items" :key="index">
                <div class="one">
                    <div class="zuo">
                        <img style="height: 35px;width: 35px;border-radius: 50%;" :src="item.photo" alt="">
                    </div>
                    <div class="you">
                        <div class="y_s">
                            {{item.name}}
                        </div>
                        <div class="y_x">
                            <div class="y_x_z">{{item.time}}前</div>
                            <div class="y_x_y">来自{{item.type}}</div>
                        </div>
                    </div>
                </div>
                <div class="two" @click="pinglun()">
                    {{item.content}}
                </div>
                <div class="three">
                    <div v-for="(value,index) in item.picture" :key="index"><img :src="value" alt=""></div>
                   
                </div>
                <div class="four">
                    <div class="left">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.d_z" alt=""
                                @click="dianzan(index)">
                            <span>{{ item.dianzan_number }}</span>
                        </div>
                    </div>
                    <div class="zhong">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;"
                                src="../components/cby/photo/评论.png" alt="" @click="pinglun()">
                            <span>评论</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="l_z">
                            <img style="height: 15px;width: 15px;margin-right: 5px;" :src="item.s_c" alt=""
                                @click="shoucang(index)">
                            <span>{{item.now_shou}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="shopping_cart" @click="fabu_dain()">
        <van-icon name="edit" size="30" color="#ffff"/>
        </div>

        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <div class="motai">
                <div class="mo_one" @click="motai_dian(index)" v-for="(item,index) in motai_list" :key="index">
                    <img style="width: 50%;height: 100%;" :src="item.path">
                    <div><span>{{item.content}}</span></div>
                </div>
            </div>
            <div @click="close_motai()"
                style="position: absolute;width: 100vw; bottom: 0vh;display: flex;justify-content: center;margin-bottom: 20px;">
                <van-icon name="cross" />
            </div>

        </van-popup>
    </van-pull-refresh> 
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive } from 'vue'
const router = useRouter()
const route = useRoute()

//输入框
let search = ref(null)
function search_fn(){
    console.log(search.value); 
    router.push({
        name: 'search',   
    })
}

function message_fn(){
    router.push({
        name: 'xiao_xi',
    })
}
//下拉刷新
const count = ref(0);
const loading = ref(false);

const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
const items:any = reactive(
    [
        {
            name: '花花',
            time: '2小时',
            type: '绘画',
            content: '宝玉宝玉宝玉宝玉',
            photo: new URL(`../components/cby/photo/2.jpg`, import.meta.url).href,
            picture: [
                new URL(`../components/cby/photo/1.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/2.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/3.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/4.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/1.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/2.jpg`, import.meta.url).href,
                new URL(`../components/cby/photo/3.jpg`, import.meta.url).href,
            ],
            dian_zan: false,
            d_z: new URL(`../components/cby/photo/点赞前.png`, import.meta.url).href,
            dianzan_number:0,
            shou_cang: false,
            now_shou: '收藏',
            s_c: new URL(`../components/cby/photo/收藏前.png`, import.meta.url).href
        },
        {
            name: '草草',
            time: '1小时',
            type: '布艺',
            content: '出师表出师表出师表',
            photo: new URL(`../components/cby/photo/3.jpg`, import.meta.url).href,
            picture: {
                p_1: new URL(`../components/cby/photo/1.jpg`, import.meta.url).href,
                p_2: new URL(`../components/cby/photo/2.jpg`, import.meta.url).href,
                p_3: new URL(`../components/cby/photo/3.jpg`, import.meta.url).href,
                p_4: new URL(`../components/cby/photo/4.jpg`, import.meta.url).href,
            },
            dian_zan: false,
            d_z: new URL(`../components/cby/photo/点赞前.png`, import.meta.url).href,
            dianzan_number:2,
            shou_cang: false,
            now_shou: '收藏',
            s_c: new URL(`../components/cby/photo/收藏前.png`, import.meta.url).href
        },
        {
            name: '红红',
            time: '6小时',
            type: '艺术',
            content: '红楼梦红楼梦红楼梦',
            photo: new URL(`../components/cby/photo/4.jpg`, import.meta.url).href,
            picture: {
                p_1: new URL(`../components/cby/photo/1.jpg`, import.meta.url).href,
                p_2: new URL(`../components/cby/photo/2.jpg`, import.meta.url).href,
            },
            dian_zan: false,
            d_z: new URL(`../components/cby/photo/点赞前.png`, import.meta.url).href,
            dianzan_number:4,
            shou_cang: false,
            now_shou: '收藏',
            s_c: new URL(`../components/cby/photo/收藏前.png`, import.meta.url).href
        }
    ]
)

//教程
function jiaocheng(){
    router.push({
        name: 'jiaocheng',   
    })
}
//hang的底部点击事件
// const dianzan_number = ref(0)
function dianzan(index: any) {
    items[index].dian_zan = !(items[index].dian_zan)
    if (items[index].dian_zan == true) {
        items[index].d_z = new URL(`../components/cby/photo/点赞后.png`, import.meta.url).href
        items[index].dianzan_number = items[index].dianzan_number + 1
    }
    else if (items[index].dian_zan == false) {
        items[index].d_z = new URL(`../components/cby/photo/点赞前.png`, import.meta.url).href
        items[index].dianzan_number = items[index].dianzan_number - 1
    }
}
function pinglun() {
    router.push({
        name: 'xiangqing',
        query:{
            pro_id:111
        }   
    })
}
function pinglun_wz() {
    router.push({
        name: 'articlexq',
        query:{
            pro_id:111
        }   
    })
}
function shoucang(index: any) {
    items[index].shou_cang = !(items[index].shou_cang)
    if (items[index].shou_cang == true) {
        items[index].now_shou = "已收藏"
        items[index].s_c = new URL(`../components/cby/photo/收藏后.png`, import.meta.url).href
    }
    else if (items[index].shou_cang == false) {
        items[index].now_shou = "收藏"
        items[index].s_c = new URL(`../components/cby/photo/收藏前.png`, import.meta.url).href
    }
}

//发布教程的图标
function fabu_dain() {
    showPopup()
}

    //模态框
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const close_motai = () => {
    show.value = false;
}
//模态框数据
const motai_list = [
    {
        path: new URL(`../components/lgh/icon/wenzhang.png`, import.meta.url).href,
        content: '发文章'
    },
    {
        path: new URL(`../components/lgh/icon/jiaocheng.png`, import.meta.url).href,
        content: '发教程'
    },
    {
        path: new URL(`../components/lgh/icon/caogao.png`, import.meta.url).href,
        content: '草稿箱'
    },
]
//模态框的点击事件
function motai_dian(index: any) {
    if (index == 0) {
        router.push({
            name: 'fawen',
        })

    } else if (index == 1) {
        router.push({
            name: 'fajiaocheng'
        })

    } else if (index == 2) {
        console.log("2222");
    }


}
</script>
    
<style scoped>
    .shopping_cart {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0.4;背景色的透明度 */
    width: 7vh;
    height: 7vh;
    background-color: #fc5f5c;
    position: fixed;
    bottom: 10vh;
    right: 5vw;
}

.motai {
    display: flex;
    padding-top: 5px;
}

.mo_one {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.page {
    display: flex;
    flex-direction: column;
    background-color: #f4f4f4;
}

.top {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    background-color: white;
}

.yi,
.er,
.si {
    margin: 5px;
    height: 25px;
}

.yi,
.er {
    border-radius: 50px;
    text-align: center;
    line-height: 25px;
    color: #ffffff;
    font-size: 15px;
}

.yi {
    flex: 2;
    background-color: #ffad7d;
}

.er {
    flex: 2;
    margin-right: 10px;
    background-color: #ffcc86;
}

.san {
    margin: 5px;
    height: 25px;
    flex: 5;
    margin-left: 10px;
    margin-right: 20px;
    background-color: red;
    display: flex;
    border-radius: 50px;
    background-color: #f4f4f4;
}

.si {
    flex: 1;
}

.body {
    height: 87vh;
    overflow: scroll;
    overflow-x: hidden;
}

.hang {
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: white;
}

.one,
.two,
.three {
    margin: 5px 0px 5px 0px;
}
/* .three_article{
    width: 100vw;
    height: 50vh;
} */
.three_article>img{
    width: 94vw;
    height: 35vh;
}
.three>div {
    width: 29vw;
    height: 100px;
    /* border: 1px solid black; */
    display: inline-block;
    margin: 0px 3px 3px 3px;
}

img {
    width: 29vw;
    height: 100px;
    display: inline-block;
    margin: 0px 3px 3px 3px;
}

.one {
    display: flex;
}

.zuo {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.you {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.y_s {
    flex: 1;
    font-size: 15px;
}

.y_x {
    flex: 1;
    display: flex;
    font-size: 10px;
}

.y_x_z {
    color: #a4a4a4;
}

.y_x_y {
    margin-left: 10px;
    color: #a4a4a4;
}

.two {
    font-size: 15px;
    padding-left: 5px;
}

.four {
    padding-top: 5px;
    border-top: 1px solid #f4f4f4;
    display: flex;
}

.left {
    flex: 1
}

.l_z{
    text-align: center;
    color: #787878;
    font-size: 15px;
}

.zhong {
    flex: 1
}

.right {
    flex: 1
}
</style>